<template>
  <div id="page-seach">
    <LetForm v-bind="fromConfig" v-model="formDate" class="user-let-from">
      <template #header>
        <h2 class="color">高级检索</h2>
      </template>
      <template #footer>
        <div class="user-footer">
          <el-button
            type="primary"
            icon="el-icon-refresh"
            @click="handleResetClick"
            >重置</el-button
          >
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
        </div>
      </template>
    </LetForm>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import LetForm from "@/base-ui/from";

export default defineComponent({
  props: {
    fromConfig: {
      type: Object,
      defualt: () => [],
      required: true,
    },
  },
  components: {
    LetForm,
  },
  emits:["resetBtnClick","queryBtnClick"],
  setup(props,{emit}) {
    const fromItems = props.fromConfig?.fromItems ?? [];
    const formOriginData: any = {};
    for (const item of fromItems) {
      formOriginData[item.field] = "";
    }
    //数据的实时绑定
    const formDate = ref(formOriginData);
    //当用户点击重置
    const handleResetClick = () => {
      for (const key in formOriginData) {
        formDate.value[`${key}`] = formOriginData[key];
        emit('resetBtnClick')
      }
    };

//搜索模块 监听搜索按钮点击
const handleQuery=()=>{
  //传入formData数据
emit('queryBtnClick',formDate.value)
}

    return {
      formDate,
      handleResetClick,handleQuery
    };
  },
});
</script>

<style scoped lang="less">
.user-let-from {
  background-color: #fff;
  padding: 22px 60px 22px 60px;
  .color {
    color: #606266;
  }
  .user-footer {
    text-align: right;
    margin-right: 20px;
  }
}
</style>
